<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: xaxisData.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="xaxisData.length == 0"></Nodata>
  </div>
</template>

  <script>
export default {
  computed: {
  },
  watch: {
    yaxisData: "drawLine", // 数值变化是更新图表
    xaxisData: "drawLine", // 数值变化是更新图表
    color: "drawLine", // 数值变化是更新图表
    gridTop: "drawLine", // 数值变化是更新图表
    gridBottom: "drawLine", // 数值变化是更新图表
  },
  props: {
    xaxisData:{
      type: Array,
      default: function () {
        return [];
      },
    },
    yaxisData:{
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    color: {
      // 传入的颜色
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    gridTop: {
      // 顶部距离
      type: String,
      default:"19%",
    },
    gridBottom: {
      // 底部距离
      type: String,
      default:"10%",
    },
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        var cw = document.body.clientWidth;
        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.echarts_box);
          let option = {
            color: [
              "rgba(9,193,253,1)",
              "rgba(255,145,37,1)",
              "#333FFF",
              "#58CFFF",
            ],
            tooltip: {
              confine: true,
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            grid: {
              left: "12%",
              right: "4%",
              bottom: this.gridBottom,
              top: this.gridTop,
            },
            legend: {
              icon: "rect",
              orient: "horizontal",
              left: "right",
              top:"3%",
              itemWidth: 8,
              itemHeight: 8,
              formatter: ["{a|{name}}"].join("\n"),
              textStyle: {
                fontSize: 11,
                color: "rgba(181,209,254,1)",
                height: 8,
                rich: {
                  a: {
                    verticalAlign: "bottom",
                  },
                },
              },
            },
            xAxis: {
              type: "category",
              axisLine: {
                lineStyle: {
                  color: "rgba(207,238,252,0.2)",
                },
              },
              axisTick: {
                //y轴刻度线

                show: false,
              },
              splitLine: { show: false },
              axisLabel: {
                // margin: 10,
                color: "rgba(207,238,252,0.6)",
                textStyle: {
                  fontSize: 11,
                },
                formatter: (name) => {
                  return name.length > 3
                    ? name.slice(0, 3) + "":name
                }
              },
              data: this.xaxisData,
            },
            yAxis: {
              type: "value",
              // min: 0,
              // minInterval: 1,
              nameTextStyle: {
                  //y轴上方单位的颜色
                  color: "rgba(207,238,252,0.6)",
                  padding: [0, -10, 0, -35],
                },
                name: "辆",
                axisLabel: {
                  color: "rgba(207,238,252,0.6)",
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(207,238,252,0.2)",
                  },
                },
                axisTick: {
                  //y轴刻度线
                  show: false,
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(126,159,182,0.12)",
                  },
                },
            },
            series: [
              {
                name: this.yaxisData[0].name,
                data: this.yaxisData[0].data,
                type: "bar",
                barWidth: 8,
                stack: "total",
              },
              {
                name: this.yaxisData[1].name,
                data: this.yaxisData[1].data,
                type: "bar",
                barWidth: 8,
                stack: "total",
              },
            ],
          };

          myChart.setOption(option);
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            // h = this.$refs.echarts_box.offsetHeight;
            // console.log(h);
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

  <style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>
